
<template>
 <div>
  <div>
    reactive
  </div>
  <div v-if="isShow">
    数量 <input type="text" v-model="objData.num">

  </div>
  <div>
    姓名<input type="text" v-model="objData.name">
  </div>
  <div>
    <button @click="handleAddNum">添加数据</button>
  </div>
  <div>
    <button @click="handleChangeName">修改名称</button>
  </div>
  <div>
    <button @click="handleIsShow">{{ isShow?'隐藏':'显示' }}</button>
  </div>
 </div> 
</template>
<script setup lang="ts" name="test">
import {ref,reactive} from "vue"
interface objDataInterface{
  name:string
  num:number
}
let isShow=ref<boolean>(true)
let objData=reactive<objDataInterface>({
  name:"迪迦奥特曼",
  num:0,
})
// let num=ref<number>(0)
//  let name=ref<string>("迪迦奥特曼")
//  let isShow=ref<boolean>(true)
const handleAddNum=()=>{
  objData.num++
}
const handleChangeName=()=>{
if(objData.name == "迪迦奥特曼"){
  objData.name="泰罗奥特曼"
}else{
  objData.name="迪迦奥特曼"
}

}
const handleIsShow=()=>{
  isShow.value=!isShow.value
}
console.log("objData",objData)
</script>
<style scoped>

</style>
